import {defineComponent, ref,} from "vue";
import Maincontainer from "@/components/maincontainer";
import {NButton} from "naive-ui"
import {nanoid} from "nanoid"

const aaa = defineComponent({
    name: "woodenfish",
    setup() {
        // 木鱼标签
        let linshi1: any = null
        // 自动敲击
        const autoClick = ref(false)

        const gongdeNumber = ref(0)
        // 敲击产生的功德列表
        const gongdeList = ref<Array<{ value: boolean, id: string }>>([])
        const addGonede = () => {
            // 如果打开了自动敲击木鱼，就不支持手动敲击
            gongdeNumber.value += 1
            const item = {value: false, id: nanoid()}
            gongdeList.value.push(item)
            setTimeout(() => {
                gongdeList.value.splice(0, 1)
            }, 3000)
            console.log("功德+1")
        }
        // 切换敲击方式
        const changeClick = (e: MouseEvent) => {
            e.stopPropagation();
            e.preventDefault();
            autoClick.value = !autoClick.value
            if (autoClick.value) {
                linshi1 = setInterval(() => {
                    addGonede()
                    console.log("点击一次")
                }, 2000)
            } else {
                linshi1 && clearInterval(linshi1)
            }
        }

        // 测试区
        const ceshivalue = ref(false)
        const ceshifunc = () => {
            ceshivalue.value = true
        }
        return () => (<Maincontainer class="juzhong1">
            <div
                class="w-800px h-800px overflow-hidden  flex flex-col  transform transition-all">
                <div class="text-center select-none w-full juzhong1">
                    <span>
                        当前功德值：{gongdeNumber.value}
                    </span>
                    <NButton size={"small"} class="ml-10px"
                             onClick={(e) => changeClick(e)}>{autoClick.value ? "手动敲击" : "自动敲击"}</NButton>
                </div>
                {/*闪现的功德*/}
                <div class="w-full mt-100px relative">
                    {() => gongdeList.value.map((item) => {
                        return <div key={item.id} class={["absolute top-0 left-0 movetoup select-none"]}>功德+1</div>
                    })}
                </div>
                {/*木鱼*/}
                <div id="muyu"
                     class="group w-500px h-300px rounded-full bg-green-400 flex items-center justify-center relative"
                     onClick={()=>{ !autoClick.value && addGonede()}}>
                    <div class="absolute top-90px -left-10px bg-white w-120px h-120px rounded-full"/>
                    <div class="absolute top-90px -right-10px bg-white w-120px h-120px rounded-full"/>
                    <div class="w-full h-20px bg-white"/>
                    {/*锤子*/}
                    <div
                        class={["absolute -top-150px -right-220px w-20px h-300px rounded-full bg-green-400 transform transition-all origin-bottom ",autoClick.value ? "autoClick" : " -rotate-40 group-active:-rotate-65"]}>
                        <div class="absolute -top-30px -left-20px  bg-green-400 w-60px h-60px rounded-full"/>
                    </div>
                </div>

            </div>
        </Maincontainer>)
    }
})

export default aaa
